/*
* @Author: 董洌淇
* @Date: 2020年10月20日14:20:57
* @Last Modified by: 董洌淇
* @Last Modified time: 2020年10月20日14:21:06
* @Description: 报警卡片列表
*/
<template>
	<view class="alarm-cart-lsit">
		<view v-for="(item, index) in alarmCartList" :key="index" class="flex flex-space-between cart-box padding bg-white margin-bottom-sm">
			<view>
				<view class="title-style">{{ item.name }}</view>
				<view class="text-red padding-top-xs">污染物：{{ item.pollutantsName }}</view>
				<view class="text-red padding-top-xs">超标时段：{{ item.excessivePeriodOfTime }}</view>
				<view class="padding-top-xs">报警时间：{{ item.alarmTime }}</view>
				<view class="padding-top-xs">首次时间：{{ item.firstTime }}</view>
			</view>
			<view class="padding-left-xl left-style">
				<view class="font-size-32upx font-weight-600 text-center total-style padding-bottom-xs">{{ item.total }}</view>
				<button class="cu-btn round shadow margin-top-sm text-white" :class="item.type === 1 ? 'bg-red' : 'bg-yellow'">
					{{item.type === 1 ? '超标报警' : '异常报警'}}
				</button>
				<view class="margin-top-sm padding-top-sm text-center details-style" @click="detailsFn(item)">详情</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'alarmCartLsit',
		props: {
			alarmCartList: { // 数据
				type: Array,
				default () {
					return []
				}
			}
		},
		data() {
			return {
				
			}
		},
		onLoad (data) {
		},
		methods: {
			// 点击详情
			detailsFn (data) {
				console.log(data, '详情')
				uni.navigateTo({
					url: './alarmDetails'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.alarm-cart-lsit {
		.left-style {
			border-left: 2upx solid #F2F2F2;
		}
		.cart-box {
			border: 2upx solid #EFEFEF;
		}
		.total-style {
			position: relative;
			&::before {
				content: ' ';
				width: 64upx;
				height: 4upx;
				position: absolute;
				background-color: #9ccdf6;
				left: 33%;
				bottom: 0;
			}
		}
		.details-style {
			position: relative;
			&::before {
				content: ' ';
				width: 100%;
				height: 2upx;
				position: absolute;
				background-color: #F2F2F2;
				left: 0;
				top: 0;
			}
		}
	}
</style>
